<template>
  <el-form>
    <el-form-item label="关键词">
      <el-input placeholder="请输入关键词" style="width: 150px" v-model="searchVO.keyword"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button
          type="primary"
          @click="handleQuery"
      >
        <el-icon style="margin-right: 5px">
          <Search/>
        </el-icon>
        搜索
      </el-button>
      <el-button
          @click="resetQuery"
      >
        <el-icon style="margin-right: 5px">
          <Refresh/>
        </el-icon>
        重置
      </el-button>
    </el-form-item>
  </el-form>
  <update-user v-model:dialog-visible="updateDialogShow" :id="updateRowId" @submit="loadData"></update-user>
  <el-table :data="pageInfo.list" style="width: 100%">
    <el-table-column prop="userId" label="用户ID" width="180"/>
    <el-table-column prop="nickName" label="用户昵称" width="180"/>
    <el-table-column prop="gender" label="用户性别" width="180"/>
    <el-table-column label="头像" width="150">
      <template #default="{row}">
        <el-image style="width: 100px; height: 100px"
                  :preview-src-list="[row.avatar]"
                  fit="cover" :src="row.avatar"></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="openId" label="微信openId"/>
    <el-table-column prop="totalMoney" label="推广收益"/>
    <el-table-column fixed="right" label="操作" width="180">
      <template #default="{row}">
        <el-button type="warning" size="small" @click="handleEdit(row)">
          <el-icon style="margin-right: 8px">
            <Edit/>
          </el-icon>
          编辑
        </el-button>
        <el-button type="danger" size="small" @click="handleDelete(row)">
          <el-icon style="margin-right: 8px">
            <Delete/>
          </el-icon>
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div>
    <el-pagination
        v-model:currentPage="searchVO.pageNum"
        :page-size="searchVO.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="loadData"
        @size-change="handleSizeChange"
        :total="pageInfo.total"
    >
    </el-pagination>
  </div>
</template>
<script lang="ts">
import {defineComponent} from "vue";
import {SearchVO, User} from "@/typings";
import {deleteUser, listUser} from "@/api/system/user";
import UpdateUser from "@/components/system/user/update-user.vue";
import {ElMessage, ElMessageBox} from "element-plus";

export default defineComponent({
  components: {UpdateUser},
  data() {
    return {
      pageInfo: {
        list: [] as User[],
        pages: 1,
      },
      searchVO: {
        keyword: '',
        pageNum: 1,
        pageSize: 10,
      } as SearchVO,
      createDialogShow: false,
      updateDialogShow: false,
      updateRowId: '0',
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      listUser(this.searchVO).then(res => {
        this.pageInfo = res
      })
    },
    handleEdit(row: User) {
      this.updateRowId = row.userId
      this.updateDialogShow = true
    },
    handleDelete(row: User) {
      ElMessageBox.confirm("是否确认要删除该记录", 'warning',
          {confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning'})
          .then(() => {
            deleteUser(row.userId).then(res => {
              if (res == true) {
                ElMessage.success({message: '删除成功'});
                this.loadData()
              }
            })
          })
    },
    handleQuery() {
      this.loadData()
    },
    resetQuery() {
      this.searchVO = {
        userId: undefined,
        type: undefined,
        startTime: undefined,
        endTime: undefined,
        timeRange: undefined,
        keyword: undefined,
        pageNum: 1,
        pageSize: 10
      }
    },
    handleSizeChange(val: number) {
      this.searchVO.pageSize = val
    },
  }
})
</script>
<style lang="scss" scoped>

</style>